<template>
  <div class="box">
    <div class="title"><p>年龄比例</p></div>
    <!--图形图表的容器-->
    <div class="charts" ref="EchartsVc"></div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import * as echars from 'echarts'
import {EChartsType} from "echarts";

let EchartsVc = ref<any>();

onMounted(() => {
  let mycharts: EChartsType = echars.init(EchartsVc.value);
  let option = {
    //位置
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      right: 25,
      top: 40,
      textStyle:{
        color:'white',
        fontSize:22
      }
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        height:300,
        top:-30,
        left:-210,
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'inside',
          color:'white'
        },
        labelLine: {
          show: false
        },
        data: [
          {value: 1048, name: '军事'},
          {value: 735, name: '新闻'},
          {value: 580, name: '财经'},
          {value: 484, name: '娱乐'},
          {value: 300, name: '直播'}
        ]
      }
    ]
  };
  mycharts.setOption(option)
})

</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  background: rgba(168, 178, 177, 0.35);

  .title {
    margin-top: 20px;
    margin-left: 20px;

    p {
      color: white;
      font-size: 20px;
    }
  }

  .charts {
    height: 235px;
  }
}
</style>